<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品评价</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
            display: block;
            width: 300px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            background-color: lightcoral;
            border: 1px solid lightgreen;
            padding: 5px;
        }
        
        div {
            margin-left: 30px;
            margin-top: 30px;
        }
        
        a {
            float: right;
        }
    </style>

</head>

<body>
    <div id="box">
        <button id="btn1">按钮一</button>
        <button id="btn2">按钮二</button>
        <button id="btn3">按钮三</button>
        <br>
        <textarea name="" id="pingjia" cols="30" rows="10"></textarea>
        <br>
        <button id="btn">商品评价</button>
        <ul></ul>
    </div>


</body>

</html>
<script>
    let btn = window.document.querySelector('#btn');
    let ul = window.document.querySelector('ul');
    btn.onclick = function(params) {
        let pingjia = window.document.querySelector('#pingjia');
        if ('' == pingjia.value.trim()) {
            window.alert('内容不能为空,请输入内容');
            // pingjia.οnfοcus;
            return;
        }

        let li = window.document.createElement('li');
        // li.innerText = pingjia.value.trim();
        li.innerHTML = pingjia.value.trim() + '<a class="del_content" href="javascript:void(0);">删除</a>';
        ul.insertBefore(li, ul.children[0]);
        pingjia.value = '';
        let as = window.document.querySelectorAll('.del_content');
        for (let index = 0; index < as.length; index++) {
            as[index].onclick = function(param) {
                if (window.confirm('你真的要离我而去了吗')) {
                    let auth = window.prompt();
                    if ('lihaozhe' == auth) {
                        ul.removeChild(this.parentNode);
                    } else {
                        window.alert('密码错误，无法删除');
                    }
                }
            };
        }
    };
    window.document.querySelector('#btn1').onclick = function(param) {
        window.alert('ok');
    };
    window.document.querySelector('#btn2').onclick = function(param) {
        let content = window.prompt();
        window.alert(content);
    };
    window.document.querySelector('#btn3').onclick = function(param) {
        let flag = window.confirm();
        window.alert(flag);
    };
</script>